<template>
  <div>
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
    <el-tree
      show-checkbox
      :data="data"
      :props="defaultProps"
      ref="tree"
      :filter-node-method="filterNode"
    ></el-tree>
  </div>
  <!-- <h1>树形菜单</h1> -->
</template>
<script>
import api from "@/api/treemenu";
export default {
  data() {
    return {
      filterText: "",
      data: [
        // {
        //   id: "1",
        //   parentId: "-1",
        //   label: "父级",
        //   children: [
        //     {
        //       id: "2",
        //       parentId: "1",
        //       lable: "子级",
        //       children: [
        //         {
        //           id: "3",
        //           parentId: "2",
        //           lable: "孙子级",
        //           children: [],
        //         },
        //       ],
        //     },
        //   ],
        // },
      ],
      defaultProps: {
        children: "children",
        label: "desc",
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.gettreemenu();
  },
  methods: {
    //获取数据源
    gettreemenu() {
      console.log("test");
      api.getTreeMenu().then((res) => {
        console.log(res);
        this.data = res;
      });
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.desc.indexOf(value) !== -1;
    },
  },
};
</script>